import React, {Component} from 'react'
import bgImg from '../../../../../../../res/images/web/ImageCarouselItem/video bg2.png'

class ImageCarouselItem extends Component {

    render() {

        const {
            val,
            index,
            slideIndex,
            // imgHeight,
            // imgWidth,
        } = this.props
        // console.log(val)

        // const thumb = val.img
        const {
            img: thumb,
            id,
            title,
        } = val

        const imgOnLoad = (e,) => {
            this.props.imageOnLoad(e)
        }

        let cur = slideIndex === index
        let imgCls = `home-carousel-item`
        if (cur) {
            imgCls += ` home-carousel-item-cur`
        }

        return (
            <div
                className='home-carousel'
                onClick={() => {this.props.history.push(`./news/${id}`)}}
                style={{
                    height: '307px',
                    // width: '280px',
                    width: '100%',
                    overflow: 'hidden',
                }}
            >
                <img
                    src={thumb ? thumb : bgImg}
                    alt=""
                    className={imgCls}
                    onLoad={(e) => imgOnLoad(e)}
                />
                {cur ? <p className='home-carousel-title'>{title}</p> : null}

            </div>
        )
    }
}

export default ImageCarouselItem
